<template>
  <el-container>
    <el-header :style="{'box-shadow': showTop ? '' : '0 2px 3px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',}">
      <div class="mall-topbar" v-show="showTop">
        <ul>
          <li v-if="!user">
            <router-link to="/login">登录</router-link>
            <span style="color: #b0b0b0; font-size: 12px; margin: 0 5px">|</span>
            <router-link to="/register">注册</router-link>
          </li>
          <li v-else>
            <el-dropdown>
              <el-button type="text" style="padding: 0">
                <img :src="user.avatarUrl ? getImageUrl(user.avatarUrl) : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                  class="mall-avatar" align="middle"/>
                {{ user.nickname ? user.nickname : user.username }}
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" @click="$router.push('/member')">账户设置</el-button></el-dropdown-item>
                <el-dropdown-item><el-button type="text" @click="logout">退出登录</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li>
            <router-link to="/order">我的订单</router-link>
          </li>
          <li>
            <router-link to="/cart">
              <i class="el-icon-shopping-cart-full"></i> 购物车
              <span>({{ cartCount }})</span>
            </router-link>
          </li>
        </ul>
      </div>
      <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#409eff" router>
        <div class="mall-logo">
          <router-link to="/">
            <img src="../assets/imgs/mall.png" width="189" height="59" alt />
          </router-link>
        </div>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item v-for="item in itemTypeList"
          :key="item.id" :route="{ path: '/item', query: { typeId: item.id } }" :index="item.id.toString()">
          {{ item.name }}
        </el-menu-item>
        <div style="margin-top: 10px; width: 300px; float: right">
          <el-input placeholder="请输入搜索内容" v-model="keyWord">
            <el-button @click="searchClick" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-menu>
    </el-header>
    <el-main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-main>
    <el-footer>
      <div class="scroll-fixed" v-show="user">
        <div class="scroll-fixed-cell">
          <router-link to="/order">
            <el-image :src="require('../assets/imgs/test.png')"></el-image>
            订单
          </router-link>
        </div>
        <div class="scroll-fixed-cell">
          <router-link to="/cart">
            <el-image :src="require('../assets/imgs/test1.png')"></el-image>
            购物车
          </router-link>
        </div>
        <el-backtop :right="21" :bottom="70" style="width: 50px; height: 50px">
        </el-backtop>
      </div>
      <div class="mall-help">
        <router-link to="/">帮助中心</router-link>
        <span>|</span>
        <router-link to="/member">账户管理</router-link>
        <span>|</span>
        <router-link to="/order">订单操作</router-link>
        <span>|</span>
        <router-link to="/">关于我们</router-link>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { mixin } from '../mixins'
import { SPACE, selectList, selectCountByWord } from '@/api/baseApi'
export default {
  mixins: [mixin],
  data() {
    return {
      user: {},
      itemTypeList: [],
      activeIndex: '', // 头部导航栏选中的标签
      showTop: true
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('USER_INFO'))
    this.setUser(this.user)
    this.findItemType()
    this.findCartCount()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScrollx, true)
  },
  beforeUpdate() {
    this.activeIndex = this.$route.query.typeId === undefined ? '/' : this.$route.query.typeId
  },
  computed: {
    ...mapGetters({
      cartCount: 'getCartCount'
    })
  },
  methods: {
    ...mapActions(['setUser', 'setCartCount']),
    ...mapGetters(['getUser']),
    // 注销
    logout() {
      localStorage.removeItem('USER_INFO')
      window.location.reload()
    },
    // 搜索商品
    searchClick() {
      if (this.keyWord !== '') {
        this.$router.push({ path: '/item', query: { search: this.keyWord } })
        this.keyWord = ''
      }
    },
    // 查询分类列表
    async findItemType() {
      selectList(SPACE.itemType).then(res => {
        this.itemTypeList = res.state === 200 ? res.data : []
      })
    },
    // 查询购物车数量
    async findCartCount() {
      const user = this.getUser()
      if (user) {
        selectCountByWord(SPACE.cart, user.id).then(res => {
          if (res.state === 200) this.setCartCount(res.data)
        })
      }
    },
    handleScrollx() {
      this.showTop = document.documentElement.scrollTop === 0
    }
  }
}
</script>
<style>
a,
a:hover {
  text-decoration: none;
}

.mall-topbar {
  height: 40px;
  background-color: #3d3d3d;
  width: 100%;
  margin: 0 auto;
}
.mall-topbar ul {
  float: right;
  padding: 0 20px;
}
.mall-topbar li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
  list-style-type: none;
}
.mall-topbar li .el-button,
.mall-topbar li a {
  color: #b0b0b0;
}
.mall-topbar ul .mall-avatar {
  height: 31px;
  width: 31px;
  border-radius: 50px;
  transform: translateY(-15%);
  border: 1px solid #3d3d3d;
}
.mall-topbar .el-button:hover,
.mall-topbar a:hover {
  color: #fff;
}
.mall-topbar .shopCart:hover,
.mall-topbar .shopCart:hover a {
  background: #fff;
  color: #ff6700;
  cursor: pointer;
}
.el-header {
  background-color: #ffffff;
  z-index: 999;
  position: fixed;
  width: 100%;
  min-height: 70px;
  padding: 0;
}
.el-header .mall-logo {
  height: 60px;
  width: 189px;
  float: left;
  margin-right: 100px;
}
.el-header .el-menu {
  max-width: 1225px;
  width: 100%;
  padding: 5px;
  margin: 0 auto;
}
.el-header .el-menu .el-menu-item {
  margin: 0 10px;
}
.el-main {
  left: 0;
  right: 0;
  top: 120px;
  bottom: 0;
  padding: 20px 0 0 0;
  background-color: #f5f5f5;
}
.el-footer {
  width: 100%;
  text-align: center;
  background: #2f2f2f;
}
.el-footer .mall-help {
  line-height: 60px;
  text-align: center;
  color: #888888;
  background-color: #2f2f2f;
}
.el-footer .mall-help a {
  color: #888888;
  text-decoration: none;
}
.el-footer .mall-help a:hover {
  color: #fff;
}
.el-footer .mall-help span {
  padding: 0 22px;
}

.scroll-fixed {
  background-color: #fff;
  z-index: 999;
  position: fixed;
  width: 64px;
  height: 150px;
  right: 15px;
  bottom: 140px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.scroll-fixed a {
  font-size: 12px;
  color: #888888;
}
.scroll-fixed .scroll-fixed-cell {
  width: 40px;
  height: 62px;
  margin: 11px auto;
}
.scroll-fixed div:hover {
  color: #99ccff;
  cursor: pointer;
}
</style>
